<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" 
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4" 
      lang="cn">
  <head>
    <meta charset="UTF-8">
    <title>控件树</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
     <link rel="shortcut icon" th:href="@{/favicon.ico}" type="image/x-icon" />
     <link rel="stylesheet" th:href="@{/jstree/themes/default/style.min.css}" />
    <link rel="stylesheet" th:href="@{/css/font-awesome.min.css}">
	<link rel="stylesheet" th:href="@{/css/xadmin.css}">
    <script type="text/javascript" th:src="@{/js/jquery.min.js}"></script>
    <script type="text/javascript" th:src="@{/layui/layui.js}" charset="utf-8"></script>
	<script type="text/javascript" th:src="@{/jstree/jstree.min.js}"></script>
    <script type="text/javascript" th:src="@{/js/xadmin.js}"></script>
    <script type="text/javascript" th:src="@{/js/pinyinUtil.js}"></script>
    <script type="text/javascript" th:src="@{/js/common.js}"></script>
	<script type="text/javascript" th:src="@{/js/objectTree.js}"></script>
	<script type="text/javascript" th:src="@{/js/recording.js}"></script>
	<script type="text/javascript" th:src="@{/js/jquery.Jcrop.js}"></script>
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
      <script th:src="@{/js/html5shiv.min.js}"></script>
      <script th:src="@{/js/respond.min.js}"></script>
    <![endif]-->
  </head>
  
  <body>
    <div class="x-nav">
      <span class="layui-breadcrumb">
        <a href="">首页</a>
        <a>
          <cite>控件树</cite>
         </a>
      </span>
      <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" href="javascript:location.replace(location.href);" title="刷新">
        <i class="layui-icon" style="line-height:30px">ဂ</i></a>
    </div>
    <div class="x-body">
      <div class="layui-row">
        <form class="layui-form layui-col-md12 x-so">
          <label>应用(平台)&nbsp;&nbsp;</label>
		  <div class="layui-input-inline">
		      <select id = "applist" lay-filter="appselect">
		         <option th:each="obj,iterStat:${applist}" th:attr="value=${obj.id}" th:text="${obj.appName}+'('+${obj.appType == 1?'ANDROID':'IOS'}+')'"></option>
		      </select>
		  </div>
        </form>
      </div>
      <div class="layui-row" style="width:100%;border:1px solid #ddd;">
			<div class="layui-col-md6" id="blankTree" style="max-height:650px;overflow-y:auto;">
				<div class="layui-row" style="border-right:1px solid #ddd;margin-right:5px;">
				    <div class="layui-col-md12" style="text-align:center;line-height:50px;">
					  <cite style="font-family: 'PingFangSC-Regular', 'PingFang SC';font-weight: 400;font-style: normal;font-size: 18px;">控件树</cite>
					</div>
				    <div class="layui-col-md12" >
					  <xblock>
					    <input type="text" id="param" placeholder="请输入控件编码或者名称" autocomplete="off" class="input-search">
					  </xblock>
					</div>
					<div class="layui-col-md5" style="width:200px;min-height:100px;overflow:auto;">
						<div id="tree"></div>
					</div>
					<div id="objDtl" class="layui-col-md7" style="padding-right:10px;">
						<div>
						  <form class="layui-form" action="">
						  <input type="hidden" id="controlId"/>
						  <div class="layui-form-item">
								<label class="layui-form-label">父控件名称：</label>
								<div class="layui-input-block">
								    <input type="hidden" id="parentIds"/>
								    <input type="hidden" id="parentId"/>
									<input type="text" id="parentControlName"  autocomplete="off"  class="layui-input" disabled>
								</div>
							</div>
							<div class="layui-form-item">
								<label class="layui-form-label">控件名称：</label>
								<div class="layui-input-block">
									<input type="text" id="controlName" maxlength=30 autocomplete="off" placeholder="请输入控件名称" class="layui-input">
								</div>
							</div>
							
							<div class="layui-form-item">
								<label class="layui-form-label">控件编码：</label>
								<div class="layui-input-block">
									<input type="text" id="controlNumber" autocomplete="off"  class="layui-input" maxlength="15">
								</div>
							</div>
							
							<div class="layui-form-item">
								<label class="layui-form-label">控件类型：</label>
								<div class="layui-input-block">
								  <select id="controlType">
									<option value="1">按钮</option>
									<option value="2">链接</option>
									<option value="3">输入框</option>
									<option value="4">选择框</option>
									<option value="5">水平滚动区域</option>
									<option value="6">垂直滚动区域</option>
									<option value="7">文本内容区域</option>
								  </select>
								</div>
							</div>
							
							<div class="layui-form-item">
								<label class="layui-form-label">编辑状态：</label>
								<div class="layui-input-block">
								  <select id="controlStatus">
									<option value="1">有效</option>
									<option value="2">无效</option>
								  </select>
								</div>
							</div>
							
							
							<div class="layui-form-item">
								<label class="layui-form-label">控件定位类型：</label>
								<div class="layui-input-block">
								  <select id="controlLocationType" lay-filter="locationType">
									<option value="1">对象</option>
									<option value="2">坐标</option>
									<option value="3">图片</option>
									<option value="4">区域</option>
								  </select>
								</div>
							</div>
							<div class="layui-form-item">
								<label class="layui-form-label">是否通用控件：</label>
								<div class="layui-input-block">
								  <select id="commonType">
									<option value="1">否</option>
									<option value="2">是</option>
								  </select>
								</div>
							</div>
							
							<div id="objectType-div">
							<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
								<legend>对象控件</legend>
							</fieldset>
							<div class="layui-form-item">
								<label class="layui-form-label">对象代码：</label>
								<div class="layui-input-block">
									<input type="text" id="controlCode" autocomplete="off"  class="layui-input">
								</div>
							</div>
							</div>
							
							<div id="locationType-div" style="display:none;">
							<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
								<legend>位置控件</legend>
							</fieldset>
							<div class="layui-form-item">
								<div class="layui-inline">
								  <label class="layui-form-label">位置X-Y：</label>
								  <div class="layui-input-inline" style="width: 50px;">
									<input type="text" id="location-X" placeholder="X" autocomplete="off" class="layui-input">
								  </div>
								  <div class="layui-form-mid">-</div>
								  <div class="layui-input-inline" style="width: 50px;">
									<input type="text" id="location-Y" placeholder="Y" autocomplete="off" class="layui-input">
								  </div>
								</div>
							 </div>
							 </div>
							 
							 <div id="imgType-div" style="display:none;">
							 <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
								<legend>图片控件</legend>
							</fieldset>
							<div class="layui-form-item layui-form-text">
								<label class="layui-form-label">图片信息：</label>
								<div class="layui-input-block">
								  <img id="controlImg" width="100px" src="">
								</div>
						    </div>
							</div>
							
							<div id="areaType-div" style="display:none;">
							<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
								<legend>区域控件</legend>
							</fieldset>
							<div class="layui-form-item">
								<div class="layui-inline">
								  <label class="layui-form-label">起始坐标：</label>
								  <div class="layui-input-inline" style="width: 50px;">
									<input type="text" id="start-X" placeholder="X" autocomplete="off" class="layui-input">
								  </div>
								  <div class="layui-form-mid">-</div>
								  <div class="layui-input-inline" style="width: 50px;">
									<input type="text" id="start-Y" placeholder="Y" autocomplete="off" class="layui-input">
								  </div>
								</div>
							 </div>
							
							 <div class="layui-form-item">
								<div class="layui-inline">
								  <label class="layui-form-label">宽高：</label>
								  <div class="layui-input-inline" style="width: 50px;">
									<input type="text" id="width" placeholder="Width" autocomplete="off" class="layui-input">
								  </div>
								  <div class="layui-form-mid">-</div>
								  <div class="layui-input-inline" style="width: 50px;">
									<input type="text" id="height" placeholder="Height" autocomplete="off" class="layui-input">
								  </div>
								</div>
							 </div>
							</div>
							
							 <div class="layui-form-item" style="text-align:center;">
					              <button id="savebtn"  class="layui-btn"  type="button">
								   <i class="fa fa-floppy-o" style="margin-right:10px;"></i>保存
								  </button>
         					 </div>
						  </form>
						</div>
					</div>
				</div>
			</div>
			<div class="layui-col-md6">
			<div class="layui-row">
			<div class="layui-col-md12" style="text-align:center;line-height:50px;">
					  <cite style="font-family: 'PingFangSC-Regular', 'PingFang SC';font-weight: 400;font-style: normal;font-size: 18px;">操作界面</cite>
					</div>
				    <div class="layui-col-md12" >
					  <xblock>
					    <button type="button" class="layui-btn layui-btn-sm layui-btn-normal" onclick="x_admin_show('选择设备','../obj/toDeviceChoose',600,500)">选择设备</button>
					    <button type="button" class="layui-btn layui-btn-sm layui-btn-normal" onclick="installApp();">安装应用</button>
					    <button type="button" class="layui-btn layui-btn-sm layui-btn-normal" id="recordButtonId" onclick="connectDevice();">开始录制</button>
					    <button type="button" class="layui-btn layui-btn-sm layui-btn-normal" id="jcroppictrueId" onclick="jcroppictrue();">开始截图</button>
					    <button type="button" class="layui-btn layui-btn-sm layui-btn-normal" id="chooseRegionId" onclick="chooseRegion();">选择区域</button>
					    <button type="button" class="layui-btn layui-btn-sm layui-btn-normal" onclick="givebackDevice();">归还设备</button>
					  </xblock>
					</div>
				<div class="layui-col-md12">
					<div class="grid-demo">
						<div style="display: none">
							<input type="hidden" id="x1" value="">
							<input type="hidden" id="y1" value="">
							<input type="hidden" id="x2" value="">
							<input type="hidden" id="y2" value="">
							<input type="hidden" id="w" value="">
							<input type="hidden" id="h" value="">
							<input type="hidden" id="devicesHeights" value="">
						</div>
						<div style="position: absolute; background: none;">
							<div style="text-align: center" id="deviceShow">
								<p style="margin: 0;">
									<img id="screenshot" style="height: 500px;" data-holder-rendered="true">
								</p>
								<div class="container" id="jcroppictrueDiv" style="display: none">
									<div class="row">
										<div class="span12">
											<div class="jc-demo-box">

												<p style="margin: 0;">
										<img id="screenshot2" style="height: 500px;" data-holder-rendered="true">
									</p>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>

					</div>
				</div>
				</div>
				<div style="margin-top:500px;">
					  <xblock>
					    <button type="button" class="layui-btn layui-btn-sm layui-btn-normal" onclick="clickFunc('home');">home</button>
					    <button type="button" class="layui-btn layui-btn-sm layui-btn-normal" onclick="clickFunc('back');">back</button>
					  </xblock>
					</div>
			</div>
	  </div>

    </div>
  </body>

</html>